<?php $this->beginClip('pagetitle'); ?>刮刮卡游戏<?php $this->endClip(); ?>
<?php $this->beginClip('js-files'); ?>
    <script src="/resources/common/js/jquery.eraser-0.5.1.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="/resources/frontend/css/animate.min.css?a=<?php echo rand(); ?>" />
<?php $this->endClip(); ?>

<header class="page-header black" style="margin: 0;">
	<a href="<?php echo url('/activity/active', array('id_wxuser_mcard' => 1)); ?>">
		<span class="am-icon-chevron-left" id="btn-back" style="color: #FFF !important;"></span>
		<h1>刮刮卡</h1>
	</a>
</header>
<style>
    .scratchcard-wrap{
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image:url(/resources/frontend/images/guaguaka_bg.png);
        overflow: hidden;
        position: absolute;
    }
    
	.scratchcard {
		position: relative; 
		width: 70%; 
        margin-left: 15%;
        margin-right: 15%;
		height: 70px;
        background-color: white;

	}
	.scratchcard .overlay{
		width: 100%; 
		height: 100%; 
		position: absolute; 
		left: 0; 
		top: 0; 
        
	}
	.scratchcard .overlay {
		z-index: 999;
	}
    .scratchcard .prize {
        text-align: center;
        line-height: 70px;
    }
    #page-wrapper {
/*        background: rgb(184,31,36);*/
        
    }
    .scratchcard-1{
        top:60px;
        color:white;
        background-color:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        opacity:0.5; 
        display:block;
        z-index: 10000;
    }
    .scratchcard-2{
        top:90px;
        color:white;
        background-color:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        opacity:0.5;
        display:block;
        z-index: 10000;
    }
    .record_line{
        background-color:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        opacity:0.5; 
        top:-5px;
        text-align: center;
    }
    .g-num{
        width: 80%;
        height: 30px;
        background: #d82828;
        border-radius: 20px;
        border: 1px solid #e44025;
        position: relative;
        margin: 0 auto;
        margin-top: 10px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        font-size: 1.3em;
    }
    .g-num em{
/*        margin: 0 5px;*/
        color: #ffd737;
        font-style: normal;
    }
</style>
<div class="scratchcard-wrap">    
	<img class="animated bounceIn" src="/resources/frontend/images/tou.png" style="display: block; width: 75%; margin: -20px auto 20px auto;" />
    <span class="scratchcard-1 prize-rule-reward" id="prize_rule">规则》</span>
    <a class="scratchcard-2 prize-rule-reward" href="<?php echo url('activity/PrizeRecord', array('id_wxuser_mcard' => 1,'id_onlineactivity'=>1,'onlineactivity_action'=>1)); ?>">记录》</a>
    <?php $this->renderPartial('./scrollmessage'); ?>

    <div class="scratchcard">
        <div class="prize" id="value">1</div>
        <img class="overlay" src="/resources/frontend/images/discount-setup-alert.png" />
    </div>

    <div class="g-num">您还有<em>3</em>刮奖机会</div>
</div>
<div class="prizeId" style="">1</div>
<div class="prizeName" style="">2</div>

<script>
	$(document).ready(function(){
        var prizeDetail = [];
        $.ajax({
        type: 'get', 
        url: '/activity/scratchcardprizes', 
        async:false,
        data: {
            id_wxuser_mcard: '1',
            id_onlineactivity: '1',
        }, 
        success: function(rets){
            prizeDetail = rets;
            $('.prizeId').html(prizeDetail.id_activity_prize);
            $('.prize').html(prizeDetail.prize);
        },
        dataType: 'json',
        });

		$('.scratchcard .overlay').eraser({
			size: 30,
            completeRatio: .01, //设置擦除面积比例
			completeFunction: showResetButton
		});
        function showResetButton(){
            $.ajax({
                type:'get',
                url:'/activity/ScratchCardFetchPrize',
                data:{
                    id_wxuser_mcard: '1',
                    id_onlineactivity: '1',
                    id_activity_prize: $('.prizeId').text()
                },
                success:function(res){
                },
                dataType:'json',
            });
		}
    });
</script>